<!-- 主播列表 -->
<template>
  <van-grid :column-num="3" gutter="3" :border="false">
    <van-grid-item v-for="(value, index) in props.dateItemDetail.imgList" :key="index">
      <div :style="{ height: _height + 'px' }" ref="myElement" class="img-box" v-if="value.indexOf('.mp4') == -1">
        <van-image :src="value + '?x-oss-process=image/resize,w_100,h_200'" fit="cover" @load="imgLoad($event, index)"
          @click="openImgPreview(props.dateItemDetail, index)" />
      </div>
      <div :style="{ height: _height + 'px' }" class="img-box" @click="openImgPreview(props.dateItemDetail, index)"
        v-else>
        <div class="start-video">
          <van-icon name="play-circle" size="2em" color="rgba(0,0,0,.8)" />
        </div>
        <video :src="value" :poster="value + '?x-oss-process=video/snapshot,t_1,m_fast'"></video>
      </div>

    </van-grid-item>
    <van-grid-item v-if="props.dateItemDetail.details.length > 9 && props.dateItemDetail.imgList.length == 8">
      <div class=" more-box" @click="morePhoto(props.dateItemDetail)">
        <span>查看更多</span>
      </div>
    </van-grid-item>
  </van-grid>
  <van-image-preview v-model:show="show" :images="images" :startPosition="startPosition"
    :close-on-click-image="true">
    <template #image="{ src }">
      <van-image v-if="src.indexOf('.mp4') == -1" :src="src" fit="cover"></van-image>
      <div class="video-box" v-else>
        <video controls :poster="src + '?x-oss-process=video/snapshot,t_1,m_fast'">
          <source :src="src" type="video/mp4">
        </video>
      </div>
    </template>
  </van-image-preview>
</template>
<script setup>
import { ref } from "vue";

import { useRouter } from "vue-router";
const router = useRouter()

const myElement = ref(null)
const emit = defineEmits(['MorePhoto'])
const props = defineProps({
  dateItemDetail: {
    type: Object,
    default: () => { },
  },
});

let show = ref(false)
let images = ref([])
let startPosition = ref(0)

const openImgPreview = (item, i) => {
  images.value = item.imgList
  startPosition.value = i
  show.value = true
}

let _height = ref(100)
const imgLoad = (ev, i) => {
  if (myElement.value.length) {
    _height = myElement.value[0].offsetWidth
  }
}

const morePhoto = (item) => {
  emit('MorePhoto', item.id)
}

</script>


<style lang="scss" scoped>
.van-image {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

:deep(.van-grid-item__content) {
  width: 100%;
  padding: 0 !important;
}

.img-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 8px;
  overflow: hidden;
  position: relative;

  .start-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  video {
    width: 100%;
  }
}

.video-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;


  video {
    width: 100vw;
  }
}
</style>
